<template>
  <div class="op-group comp-op-common">
    <div class="op-title">对象解析</div>
    <div class="option-item">
      <div v-if="!isShowSub" class="title-row fixed">
        <span class="label">解析对象中所有的键对应的值成新列</span>
        <div>
          <a-button class="op-btn" type="primary" size="small" @click="doAction"
            >确定</a-button
          >
          <a-button class="op-btn" size="small" @click="showDetail"
            >编辑</a-button
          >
        </div>
      </div>
      <div v-if="isShowSub" class="detail-panel">
        <div class="sub-item">
          <span class="check-item">解析对象中所选键对应的值成新列</span>
          <div class="total-of-key padding-width">共有键：</div>
          <div class="padding-width">
            <a-checkbox :checked="isCheckAll" @change="checkAll">
              全选
            </a-checkbox>
            <a-button type="primary" size="small" @click="reverseCheck"
              >反选</a-button
            >
          </div>
          <div class="check-key-content padding-width">
            <a-row>
              <a-col v-for="item in jsonKeyOptions" :key="item" :span="6">
                <span class="check-key-item">
                  <a-checkbox
                    size="small"
                    :title="item"
                    :checked="selectedJsonKey.includes(item)"
                    @change="onSelectJsonKey($event, item)"
                  >
                    {{ item }}
                  </a-checkbox>
                </span>
              </a-col>
            </a-row>
          </div>
        </div>

        <div class="button-row">
          <a-button class="op-btn-sub" size="small" @click="cancel"
            >取消</a-button
          >
          <a-button
            class="op-btn-sub"
            type="primary"
            size="small"
            @click="doOption"
            >确定</a-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 整列选择 智能推荐 对象解析
 * @author Hou Jinhui
 */
import { Component, Prop, Vue } from 'vue-property-decorator'
import { apiGetJsonKeysOrArrayIndex } from '@/api/data-clean'
import DataStore, { OptionPreViewAction } from '@/store/modules/dataview'
import { cloneDeep } from 'lodash'

@Component({
  components: {},
})
export default class ColumnJsonParse extends Vue {
  @Prop({ type: String, default: '' }) tableName!: String | undefined

  //  是否进入编辑模式
  private isShowSub: boolean = false
  private jsonKeyOptions: any[] = [] // json 对象一级 key
  private selectedJsonKey: (string | null)[] = []

  // 是否全选
  private get isCheckAll(): boolean {
    return this.selectedJsonKey.length === this.jsonKeyOptions.length
  }

  // 所选列列名
  public get selectedColumnName() {
    return DataStore.tableSelectColumns[0].name
  }

  mounted() {
    this.getJsonKeyOptions()
  }

  /**
   * 获取 json 列所有 key
   * @param parameters
   * @private
   */
  private async getJsonKeyOptions(parameters?: any) {
    const requestParameters = {
      col: this.selectedColumnName,
      type: 'json',
      table: this.tableName,
    }
    // 更新 key options
    const response = await apiGetJsonKeysOrArrayIndex({
      data: {
        ...requestParameters,
        ...parameters,
      },
    })
    if (!response.data.success) {
      this.$message.error(response.data.message)
      return
    }
    const { result } = response.data
    this.jsonKeyOptions = result.index
    this.selectedJsonKey = result.index
  }

  /**
   * 修改 json key 选择状态
   */
  public onSelectJsonKey(event: any, key: string) {
    const { checked } = event.target
    if (checked) {
      this.selectedJsonKey = [...this.selectedJsonKey, key]
    } else {
      this.selectedJsonKey = this.selectedJsonKey.filter((item) => item !== key)
    }
  }

  /**
   * 全选
   */
  private checkAll($event: any) {
    const { checked } = $event.target
    if (checked) {
      this.selectedJsonKey = cloneDeep(this.jsonKeyOptions)
    } else {
      this.selectedJsonKey = []
    }
  }

  /**
   * 反选
   * 选中与未选中反转
   */
  private reverseCheck() {
    this.selectedJsonKey = this.jsonKeyOptions.filter(
      (key: string) => !this.selectedJsonKey.includes(key)
    )
  }

  //  点击取消，关闭推荐面板
  public cancel() {
    this.selectedJsonKey = cloneDeep(this.jsonKeyOptions)
    this.isShowSub = false
  }

  public showDetail() {
    this.isShowSub = true
  }

  /**
   * 编辑确认
   */
  public doOption() {
    this.doAction()
  }

  /**
   *  确认
   */
  public doAction() {
    const actionInfo: any = {
      action: OptionPreViewAction.selectionJsonParse,
      desc: '选择列 > 对象解析',
      col: this.selectedColumnName,
      data: {
        key: this.selectedJsonKey,
      },
    }
    this.$emit('actiondone', {
      ...actionInfo,
    })
  }
}
</script>

<style lang="less" scoped>
@import url('../op.less');

.padding-width {
  padding: 12px 0 0 2px;
  width: 100%;
}

.total-of-key {
  font-weight: 500;
}

.check-key-content {
  max-height: 200px;

  /deep/.check-key-item {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: calc(100% - 8px);
  }
}
</style>
